<!-- 任务列表 -->
<template>
  <div class='app-container'>
    <div class="edit">
      <div class="model">
        <div class="model-tit">
          <div class="tit1">
            <p class="partnum">品牌：</p>
            <p>AD620ARZ</p>
          </div>
          <div class="tit1">
            <p class="num">品牌数量：</p>
            <p>10000000</p>
          </div>
          <div class="tit1">
          </div>
        </div>
        <div class="model-con">
          <div class="context-tit stiky-tit">
            <div class="icon">来源1</div>
            <div class="titbox">
              <div class="source">
              <p class="title">来源：</p>
              <p>人工</p>
            </div>
            <div class="pic">
               <p class="title">图片：</p>
              <div>
               <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" accept=".jpg,.png" :before-upload="beforeAvatarUpload" v-model="model.Files">
                <img v-if="this.model.Image" :src="this.model.Image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              </div>
            </div>
            <div class="btn">
                  <div></div>
                  <el-button class="btnsum" type="primary" size="medium" @click="onSubmit()">提交</el-button>
                </div>
            </div>
           
          </div>
          <div class="context">
        <div class="left"> 
          <p class="title"><i class="left_line"></i>固定属性</p>
          <!--  :data="tableData" -->
              <el-table
                border
                  :data="tableData"
                  style="width: 95%">
                  <el-table-column
                    prop="name"
                    label="属性名称"
                    align="center"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="origvalue"
                    label="原始值"
                    align="center"
                    width="180">
                  </el-table-column>
                  <el-table-column
                  align="center"
                    label="修改值"
                    >
                    <template slot-scope="scope">
                      <div v-if="scope.row.name == '名称'">
                         <el-select style="width:100%;" v-model="model.CategoryArr" filterable>
                            <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                         </el-select>
                      </div>
                       <div v-if="scope.row.name == '中文名'">
                         <el-select style="width:100%;" v-model="model.brand" filterable >
                             <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                         </el-select>

                      </div>
                      <div v-if="scope.row.name == '英文名'">
                         <el-select style="width:100%;" v-model="model.package" filterable >
                             <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                         </el-select>

                      </div>
                      <div v-if="scope.row.name == '简称'" >
                         <el-select style="width:100%;"  v-model="model.packing" filterable>
                             <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                         </el-select>

                      </div>
                      <div v-if="scope.row.name == '网站'">
                         <el-select style="width:100%;" v-model="model.MPQ" placeholder="请选择网站">
                             <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                         </el-select>
                      </div>
                      <div v-if="scope.row.name == '厂商'">
                         <!-- <el-input style="width:100%;" v-model="model.describle" placeholder="请输入内容"></el-input> -->
                        <el-select style="width:100%;"  v-model="model.firm" filterable>
                            <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                        </el-select>
                      </div>
                       <div v-if="scope.row.name == '包装'">
                         <el-input style="width:100%;" v-model="model.packing" placeholder="请输入内容"></el-input>
                      </div>
                       <div v-if="scope.row.name == '描述'">
                         <el-input style="width:100%;" v-model="model.describle" placeholder="请输入内容"></el-input>
                      </div>
                     
                    </template>
                       
                      </el-table-column>
        </el-table>
        </div>
            <div class="right">
          <p class="title"><i class="left_line"></i>同义词</p>
            <synonym :mainId="brandId" ref="synon" :isUnartifical="false"></synonym>
          </div>
          </div>
        </div>
            <div class="model-con">
          <div class="context-tit">
            <div class="icon pic2">来源2</div>
            <div class="titbox">
              <div class="source">
              <p class="title">来源：</p>
              <p>人工</p>
            </div>
            <div class="pic">
               <p class="title">图片：</p>
              <div>
                <img class="imgpic" src="./../../assets/images/img_bg1.png" alt=""/>
              </div>
            </div>
            <div class="btn">
                  <div></div>
                  <el-button class="btnsum" type="success" size="medium" @click="onUser()">使用</el-button>
                </div>
            </div>
           
          </div>
          <div class="context">
        <div class="left"> 
          <p class="title"><i class="left_line"></i>固定属性</p>
              <el-table
                border
                :height="tableHeight"
                :data="tableData1"
                style="width: 95%">
                  <el-table-column
                    prop="name"
                    label="属性名称"
                    align="center"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="origvalue"
                    label="原始值"
                    align="center"
                    >
                  </el-table-column>
                
        </el-table>
        </div>
            <div class="right">
          <p class="title"><i class="left_line"></i>同义词</p>
            <synonym :mainId="brandId" ref="synon" :isUnartifical="true"></synonym>
          </div>
          </div>
        </div>
      
      </div>
      
        
      <!-- 型号编辑 -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getToken } from "@/utils/auth";
import synonym from "./../../components/synonym.vue"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {synonym},
  data () {
    //这里存放数据
    return {
      brandId:null,
      treeoptions: [],
      treeprop: { value: 'id', label: 'label', children: 'children' },
      show:true,
        uploadUrl:`${process.env.VUE_APP_BASE_API}/uploader.api?type=brand`,
        imgs:require("./../../assets/images/img_bg1.png"),
       tableData: [{
            name: '名称',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '中文名',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '英文名',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '简称',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          {
            name: '网站',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '厂商',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
           {
           name: '包装',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
           {
           name: '描述',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
          ],
           tableData1: [{
            name: '名称',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '中文名',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '英文名',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '简称',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          {
            name: '网站',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '厂商',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
           {
           name: '包装',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
           {
           name: '描述',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
          ],
          dynamicData:[
            {
            name: '通道数量',
            samename: '通道数量',
            origvalue: '王小虎',
            status:true,
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
             name: '转换速率',
             samename: '转换速率',
             origvalue: '王小虎',
             status:true,
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '共模抑制比',
            samename: 'cmr-共模抑制比',
             origvalue: '王小虎',
             status:false,
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '电源电压-最大',
            samename: '电源电压-最大',
            origvalue: '王小虎',
            status:true,
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
           {
            name: '电源电压-最小',
            samename: '电源电压-最小',
            origvalue: '王小虎',
            status:false,
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          ],
           options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
          model:{
            CategoryArr:'',
            brand:'',
            package:'',
            packing:'',
            firm:'',
            MPQ:'',
            packing:'',
            describle:'',
            //  Files:'',
            Image:'',
          },
      tableHeight:400,
      
    };
  },
  //监听属性 类似于data概念
  computed: {
     
  },
  //监控data中的数据变化
  watch: {
  
  },
  //方法集合
  methods: {
   
     handleChange(value) {
      // this.mode.CategoryArr = this.$refs["classify"].getCheckedNodes()[0].pathLabels;
      console.log(this.mode.CategoryArr)
     },
      beforeAvatarUpload(file) {
        // console.log(file)
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.msgError('图片只能是 JPG/PNG 格式!');
      }
      if (!isLt5M) {
        this.msgError('图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },
       handleAvatarSuccess(response, file) {
        //  console.log(response)
      this.model.Image = response[0].Url;
    },
   
     handleIsDisplay(index,row){
       if(index == 0){
         row.status = !row.status;
       }
       if(index == 1){
         row.status = !row.status;
       }
       if(index == 2){
         row.status = !row.status;
       }
       if(index == 3){
         row.status = !row.status;
       }
       if(index == 4){
         row.status = !row.status;
       }
     },
     
    
     
      onSubmit(){
       
        console.log(this.model)
      },
      onUser(){
        var i =0;
        //  delete this.model.Image;
        for(var key in this.model){
        console.log(this.model[key])
       this.model[key]=this.tableData1[i].origvalue;
        i++;
        }
        console.log(this.model);
        this.model.Image=this.imgs;
        console.log(this.model);
      }

  },
 
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.brandId = this.$route.query.id;
    // console.log(this.brandId);
    // console.log('standard2');
    // console.log(getToken());
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
     
  },
  //beforeCreate() {}, //生命周期 - 创建之前
  //beforeMount() {}, //生命周期 - 挂载之前
  //beforeUpdate() {}, //生命周期 - 更新之前
  //updated() {}, //生命周期 - 更新之后
  //beforeDestroy() {}, //生命周期 - 销毁之前
  //destroyed() {}, //生命周期 - 销毁完成
  //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
@import './../../assets/reset.css';
.edit{
  width: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  .model{
    margin-bottom: 10px;
  }
  .model-tit{
    width: 100%;
    height: 54px;
   background: #F7F8FB;
   border-radius: 2px;
   font-size: 16px;
   color: #666666;
   display: flex;
   justify-content: space-between;
   align-items: center;
  
   .tit1{
     width: 33.3%;
     line-height: 54px;
     display: flex;
     align-items: center;
     .partnum{
       margin-left: 20px;
      //  width: 12%;
       
     }
   
     p:nth-child(2){
       color: #000;
       font-weight: bold;
     }
   }
   

  }
  .model-con{
    margin-top: 20px;
    border: 1px solid #F7F8FB;
    border-radius: 2px;
    padding-bottom: 10px;
    .stiky-tit{
      position: sticky;
      position: -webkit-sticky;
      top:88px;
      z-index: 999;
    }
    .context-tit{
      display: flex;
      height: 45px;
       width: 100%;
      background: #fff;
      border-bottom: 1px solid #F7F8FB;
     
      .icon{
        width: 70px;
        height: 28px;
        background-image: url("./../../assets/images/square.png");
        background-size: 100% 100%;
        font-size: 12px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
        padding-left: 10px;
      }
      .pic2{
         background-image: url("./../../assets/images/square1.png");
      }
      .titbox{
      width: 100%;
        display: flex;
        font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 45px;
      .source{
         width: 33.3%;
        display: flex;
        align-items: center;
      }
      .pic{
         width: 33.3%;
        display: flex;
        align-items: center;
        .avatar-uploader{
          width: 100%;
          height: 40px;
          .avatar{
            width: 100%;
            height: 100%;
          }
        }
        .imgpic{
          width: 150px;
          height: 40px;
          display: block;
        }
      }
       .btn{
             width: 33.3%;
          display: flex;
          align-items: center;
            justify-content: space-around;
           
        }
      .source{
        padding-left: 4%;
      
      }
      }
    }
    .context{
      width: 100%;
      display: flex;
      .title {
        margin-right: 20px;
        font-weight: bold;
        margin-bottom:20px
    }
    .left{
      width: 50%;
      margin-left: 10px;
      .left_line {
                display: inline-block;
                width: 3px;
                height: 16px;
                background-color: #286af6;
                vertical-align: middle;
                overflow: hidden;
                margin: -3px 4px 0 0;
            }
    }
    .right{
      width: 50%;
      .left_line {
                display: inline-block;
                width: 3px;
                height: 16px;
                background-color: #286af6;
                vertical-align: middle;
                overflow: hidden;
                margin: -3px 4px 0 0;
            }
    }
    }
  }
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>